<template>
  <div>
    <div class="table-box">
      <div class="form-box">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="流程名称：">
            <el-input v-model="Varname" placeholder=""></el-input>
          </el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form>
      </div>
      <div class="center">
        <el-table
          :data="modelList"
          border
          @selection-change="">
          <el-table-column
            type="index"
            width="80"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="id"
            label="流程模型ID"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="模型名称"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建日期"
            :formatter="dateFormatCreatTime"
          >
          </el-table-column>
          <el-table-column
            prop="lastUpdateTime"
            label="更新日期"
            :formatter="dateFormatUpdateTime"
          >
          </el-table-column>
          <el-table-column
            prop="category"
            label="分类编码"
          >
          </el-table-column>
          <el-table-column
            prop=""
            label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="designModel(scope.row)" type="text" size="small">设计</el-button>
              <el-button @click="deleteModel(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box mt20 text-right">
        <el-pagination
          @current-change="query"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!--新增弹框-->
    <el-dialog title="新增" :visible.sync="addFormVisible">
      <el-form :model="addForm" :inline="true" class="demo-form-inline">
        <el-form-item label="流程名称：" :label-width="formLabelWidth">
          <el-input v-model="addForm.processName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="流程描述：" :label-width="formLabelWidth">
          <el-input type="textarea" autosize v-model="addForm.describtion" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Config from '../config';
  import moment from 'moment';

  const otherH = 245;
  const tableH = document.body.offsetHeight - otherH;

  export default {
    name: 'ModelList',
    data() {
      return {
        table: {
          props: {
            height: document.body.offsetHeight - otherH
          }
        },
        formLabelWidth: '180px',
        addFormVisible: false,
        addForm: {
          processName: "",
          describtion: ""
        },
        modelList: [],
        total: 0,
        currentPage: 1,
        size: 10,
        Varname: ''
      }
    },
    created: function () {
      this.initPage();
    },
    mounted() {
      this.initPage();
    },
    methods: {
      initPage() {
        const tableH = document.body.offsetHeight - otherH;
        this.table.props.height = tableH;
        this.query();
      },
      addSubmitForm: function () {
        var that = this;
        var modelId;
        this.$confirm('确认提交吗？', '提示', {
          type: 'warning'
        }).then(function () {
          console.log(dialog.addForm);
          that.$http.post(Config.url + "repository/models", {"name": dialog.addForm.processName}).then(function (data) {
            modelId = data.data.id;
            var originalUrl = "/activiti/toDiagram?name=" + dialog.addForm.processName + "&description=" + dialog.addForm.describtion
              + "&modelId=" + modelId;
            var encodeUrl = encodeURI(originalUrl);
            console.info(encodeUrl);
            window.location.href = encodeUrl;
          });
          dialog.addFormVisible = false;
        })
      },
      //新增模型
      add: function () {
        this.addFormVisible = true;
      },
      //格式化创建时间
      dateFormatCreatTime: function (data, row) {
        if (data.createTime != null) {
          return moment(data.createTime).format('YYYY-MM-DD HH:mm');
        }
      },
      //格式化更新时间
      dateFormatUpdateTime: function (data, row) {
        if (data.lastUpdateTime != null) {
          return moment(data.lastUpdateTime).format('YYYY-MM-DD HH:mm');
        }
      },
      //删除模型
      deleteModel: function (row) {
        var self = this;
        this.$http.delete(Config.url + "repository/models/" + row.id).then(function (data) {
          self.$message({
            message: "删除成功",
            type: 'warning'
          });
          //document.location.reload();
          self.query();
        })
      },
      //设计模型
      designModel: function (row) {
        window.location.href = "/businessProcessManager/html/diagram.html?modelId=" + row.id;
      },
      //查询模型列表 包括分页查询
      query: function (data) {
        const that = this;
        const url = `${Config.url}repository/models`;

        const params = {
          start: (data !== undefined && !isNaN(data)) ? ((data - 1) * 10) : (0)
        };
        if (this.Varname !== "") {
          params.nameLike = `%${that.Varname}%`;
        }

        this.$http.get(url, {params}).then(function (data) {
          that.modelList = data.data.data;
          that.total = data.data.total;
        }, function (response) {
          console.info(response);
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
